import { parseExcelFile } from '@/src/utils/commonFunc';
import { FirstHeaderC, PrimaryC, UploadC, TableC } from '@/src/components';
import React, { useState } from 'react';
import { Space, Divider, message } from 'antd';
import { exportFile } from 'table-xlsx';

export default () => {
  const [file, setFile] = useState();

  const testFileColumn = [
    { key: 'productName', title: '产品名称' },
    { key: 'gzCode', title: '估值代码' },
    { key: 'status', title: '产品状态' },
    { key: 'startDate', title: '成立日' },
    { key: 'endDate', title: '到期日' },
  ];
  const testFileData = [];
  for (let i = 0; i < 66; i++) {
    testFileData.push({
      productName: `薄荷叶${i}`,
      gzCode: `ccddxx${i}`,
      status: `存续期${i}`,
      startDate: '2022-12-22',
      endDate: '2023-09-11',
    });
  }
  const downLoadTestFile = (type) => {
    if (type === 1) {
      exportFile({
        fileName: 'test解析excel-单sheet页.xlsx',
        dataSource: testFileData,
        columns: testFileColumn,
        raw: true,
      });
    }
    if (type === 2) {
      exportFile({
        fileName: 'test解析excel-多sheet页.xlsx',
        sheetNames: ['sheet1', 'sheet2'],
        columns: [testFileColumn, testFileColumn],
        dataSource: [testFileData, testFileData],
      });
    }
  };

  // sheet1的替换key
  const keyMapSheet1 = { 产品名称: 'productName', 估值代码: 'gzCode', 产品状态: 'status', 成立日: 'startDate', 到期日: 'endDate' };
  // sheet2的替换key
  const keyMapSheet2 = { 产品名称: 'name', 估值代码: 'code', 产品状态: 'status', 成立日: 'date1', 到期日: 'date2' };
  const handleGetData = () => {
    // keyMaps参数 为 替换 key值的键值对，有几个sheet页数组长度就是几
    if (file) {
      parseExcelFile(file, [keyMapSheet1, keyMapSheet2]).then((res) => {
        console.log(res);
      });
    } else {
      message.warning('先选择测试文件');
    }
  };
  return (
    <div>
      <FirstHeaderC title='解析excel,支持解析多个sheet页面,不支持分组表头' />
      <Space>
        <PrimaryC title={'下载单sheet测试文件'} onClick={() => downLoadTestFile(1)} />
        <PrimaryC title={'下载多sheet测试文件'} onClick={() => downLoadTestFile(2)} />
        <UploadC
          accept={'.xls,.xlsx'}
          type={2}
          onUpload={(e) => {
            console.log(e);
            setFile(e);
          }}
        />
        <PrimaryC onClick={handleGetData} title='打印数据' />
      </Space>
      <Divider />
      <TableC columns={testFileColumn} dataSource={testFileData} hidePage={true} rowKey='gzCode' scroll={{ y: 300 }} />
    </div>
  );
};
